<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Make widgets user friendly"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Make widgets user friendly
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-1171972B-3899-4EC4-A96E-85D286C1DFB4]--><body><div id="content"><div class="header"><h1>
Make widgets user friendly
</h1><div id="breadcrumb"></div></div>
<p id="GUID-288DD840-CC80-4A0D-830F-38C7F8BF2408">On the HTML page, a CSS file is used to layout the page, making
it user friendly. The recommended way is to write a separate style
file for the CSS rules. Put the widget CSS in the
css/style.css file.</p>
<p id="GUID-A5946652-F078-40A0-A4F6-78538D6B4579">Open the css/style.css file and add the following code:</p>

<div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>.jimu-widget-demo div:first-child{
  color: red;
}
</code></pre></div>
</div><p id="GUID-E6064BB3-BD7E-4849-AA04-0804F6390019">Note that all of the selectors in the style.css file should
contain the base CSS class to avoid name conflict.</p>
<p id="GUID-764BB2B7-5C23-4991-950D-94E809726CC4"></p><img purpose="img" placement="inline" alt="Make widgets user friendly" title="Make widgets user friendly" src="03w3/GUID-10C0E519-5C9D-4AAF-9F64-1662635AA5B3-web.png"><p id="GUID-DD10D3F1-A3BC-4F7C-A49D-4AA31F686B78"></p>

<div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>